<script>
import EchartBase from './base/echartBase'

export default {
  extends: EchartBase,
  data() {
    return {
      title: '',
      pieData: [],
      legendData: []
    }
  },
  methods: {
    handleDataSource(obj) {
      if (!obj) return

      this.title = obj.title || ''
      this.pieData = obj.pieData || []

      this.$nextTick(() => {
        if (this.chart) {
          this.chartOption = this.initChartOption()
          this.chart.setOption(this.chartOption)
        }
      })
    },
    initChartOption() {
      const option = {
        title: this.initTitle(),
        grid: this.initGrid(),
        toolbox: this.dataSource.showToolbox ? this.initToolbox() : {},
        tooltip: {
          trigger: 'item'
        },
        series: this.initSeries(),
        legend: {
          type: 'scroll',
          data: this.legendData,
          top: 28
        },
      }
      if (this.dataSource.color && this.dataSource.color.length === this.yAxisData.length) {
        option.color = this.dataSource.color
      }
      return option
    },
    initSeries() {
      // https://echarts.apache.org/zh/option.html#series-pie
      const serie = {
        type: 'pie',
        name: this.dataSource.pieName || '',
        startAngle: this.dataSource.startAngle !== undefined ? this.dataSource.startAngle : 90,
        endAngle: this.dataSource.endAngle !== undefined ? this.dataSource.endAngle : 'auto',
        padAngle: this.dataSource.padAngle || 0,
        roseType: this.dataSource.roseType || false,
        avoidLabelOverlap: true,
        label: {
          show: this.dataSource.showLabel !== undefined ? this.dataSource.showLabel : true,
          position: this.dataSource.labelPosition || 'outside',
          fontWeight: 'bold',
          fontSize: 12
        },
        labelLine: {
          show: this.dataSource.showLabel !== undefined ? this.dataSource.showLabel : true
        },
        emphasis: {
          label: {
            show: true,
            fontWeight: 'bolder',
            fontSize: 16,
          },
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            shadowOffsetX: 0,
          }
        },
        center: this.dataSource.pieCenter || ['50%', '50%'],
        radius: this.dataSource.pieRadius || '50%',
        data: this.pieData,
        animationDuration: this.animationDuration
      }
      if (this.dataSource.borderRadius !== undefined) {
        serie.itemStyle = {
          borderRadius: this.dataSource.borderRadius,
          borderColor: '#fff',
          borderWidth: 1
        }
      }
      this.legendData = this.pieData.map(item => { return item.name })
      return [serie]
    }
  }
}
</script>